<template>
  <div class="clear">
    <div class="left message">
      <div class="clear messageTitle"><!-- 7.6 div新加-->
        <h2>我的留言</h2>
        <ul class="messageList"><!-- 7.6 clear新删-->
          <li :class="{nowPage : 0 == messageActive}" @click="switchMessage(0,2)"><a href="javascript:;">最近留言</a></li>
          <li :class="{nowPage : 1 == messageActive}" @click="switchMessage(1,1)"><a href="javascript:;">待回复留言(<span style="color: #ff6600;">24</span>)</a></li>
        </ul>
        <a href="javascript:;" class="more" style="position:inherit;float:right;">更多&nbsp; &gt;&gt;</a><!-- 7.6 样式新加-->
      </div>
      <div class="messageDiv">
        <div class="messageText" v-show="messageShow == 0">
          <ul class="clear">
            <li class="clear" v-for="message in message">
              <span class="messageTime">20分钟前</span>
              <p>
                <span>{{message.true_name}}：</span>
              </p>
              <a href="javascript:;" class="messageName">{{message.user_id}}</a>
            </li>
          </ul>
        </div>
        <div class="messageText" v-show="messageShow == 1">
          <ul class="clear waitReply">
            <li class="clear" v-for="message in message">
              <span class="messageTime">20分钟前</span>
              <p>
                <span>{{message.true_name}}：</span>
                <span>{{message.email}}</span>
              </p>
              <a href="javascript:;" class="messageName">{{message.user_id}}</a>
              <a href="javascript:;" class="messageReply" @click="applyFrame(message.true_name,message.user_id)">回复</a>

            </li>

            <div class="returnBox clear" v-show="applyShow">
              <div class="returnBoxClose" @click="close"><img src="@/assets/images/close_03.png" width="17"></div>
              <div class="returnInfo clear">
                <div class="left returnTitle">
                  <span>{{applyName}}：</span>
                </div>
                <a href="javascript:;" class="messageName" style="float: right;">{{articleName}}</a>
              </div>
              <textarea placeholder="请输入回复内容" v-model="applyContent"></textarea>
              <button class="right" @click="apply">回复</button>
            </div>
            <!--回复弹出框 end-->

          </ul>
        </div>
      </div>

    </div>
    <div class="right messageNotice">
      <ul class="clear">
        <li class="nowPage"><a href="javascript:;">征稿信息</a></li>
        <li><a href="javascript:;">系统公告</a></li>
      </ul>
      <div class="messageNoticeDiv">
        <div class="NoticeInfo" style="display: block;">
          <ul>
            <li class="clear">
              <i class="left"><img src="images/ii_03.png" width="6"></i>
              <a href="javscript:;" class="left">500万存单变保单，，我们还能相信银行吗？</a>
            </li>
            <li class="clear">
              <i class="left"><img src="images/ii_03.png" width="6"></i>
              <a href="javscript:;" class="left">500万存单变保单，我们还能相信银行吗？</a>
            </li>
            <li class="clear">
              <i class="left"><img src="images/ii_03.png" width="6"></i>
              <a href="javscript:;" class="left">500万存单变保单，，我们还能相信银行吗？</a>
            </li>
            <li class="clear">
              <i class="left"><img src="images/ii_03.png" width="6"></i>
              <a href="javscript:;" class="left">500万存单变保单，我们还能相信银行吗00还能相信银行吗？</a>
            </li>
            <li class="clear">
              <i class="left"><img src="images/ii_03.png" width="6"></i>
              <a href="javscript:;" class="left">500万存单变保单，，我们还能相信银行吗？</a>
            </li>
            <li class="clear">
              <i class="left"><img src="images/ii_03.png" width="6"></i>
              <a href="javscript:;" class="left">500万存单变保单，我们还能保单，我们还能相信银行吗？</a>
            </li>
            <li class="clear">
              <i class="left"><img src="images/ii_03.png" width="6"></i>
              <a href="javscript:;" class="left">500万存单变保单，我们还能还能相信银行吗？</a>
            </li>
            <li class="clear">
              <i class="left"><img src="images/ii_03.png" width="6"></i>
              <a href="javscript:;" class="left">500万存单变保单，我们还能相信银行吗？</a>
            </li>

          </ul>
        </div>
        <div class="NoticeInfo">
          <div class="not">
            <img src="images/no.png" width="151">
            <p>暂无数据</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "HomeMessage",
        props: {
          message: Array
        },
        data:function(){
          return {
            nowPage: true,
            messageActive: 1,
            messageShow: 1,
            applyName: '',
            articleName: '',
            applyContent: '',
            applyShow: false
          }
        },
        methods: {
          switchMessage: function (type,pageNum) {
            this.messageActive = type;
            this.messageShow = type;
            this.$emit('change',pageNum);
          },
          applyFrame: function (true_name,articleName) {
            this.applyName = true_name;
            this.articleName = articleName;
            this.applyShow = true;
          },
          close: function () {
            this.applyName = '';
            this.articleName = '';
            this.applyShow = false;
          },
          apply: function () {
            var that = this;
            this.$axios.post('/user/apply.shtml?true_name='+this.applyContent).then(function (response) {
              if(response.data.flag){
                //that.loadData(that.true_name,that.sex,that.currentPage,that.pageSize);
                that.$message({
                  message: '创建成功',
                  type: 'success',
                  duration: '2000'
                });
                that.applyName = '';
                that.articleName = '';
                that.applyShow = false;
                that.$emit('change',1);
              }else{
                that.$message({
                  message: '创建失败',
                  type: 'error',
                  duration: '2000'
                });
              }
            })
          }
        }
    }
</script>

<style scoped>

</style>
